<!DOCTYPE html>

<html>
<head>
<title>UI Components - A Taste of using Vuetify in Go - QOR5 Document</title>

<meta name='description'>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<base href='/docs/'>

<link href='index.css' rel='stylesheet' type='text/css'>

<script type='text/javascript' defer src='index.js'></script>
</head>

<body>
<div id='app' v-cloak>
<div v-init-context:vars='{hideAside: false}' class='flex h-screen'>
<div class='flex-1 flex flex-col overflow-hidden'>
<div class='flex h-full'>
<aside v-show='!vars.hideAside' id='menuScroller' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<div class='h-12'><search></search></div>

<ul class='px-0 py-3 mx-0 text-base font-normal list-none text-gray-700'>
<li class='m-0'>
<a href='index.html' id='index.html' onclick='window.storeMenuState("index.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Introduction</a>
</li>

<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Getting Started</li>

<li class='m-0'>
<a href='getting-started/one-minute-quick-start.html' id='getting-started/one-minute-quick-start.html' onclick='window.storeMenuState("getting-started/one-minute-quick-start.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>1 Minute Quick Start</a>
</li>

<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Building Admin</li>

<li class='m-0'>
<a href='basics/presets-instant-crud.html' id='basics/presets-instant-crud.html' onclick='window.storeMenuState("basics/presets-instant-crud.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>presets, Instant CRUD</a>
</li>

<li class='m-0'>
<a href='basics/listing.html' id='basics/listing.html' onclick='window.storeMenuState("basics/listing.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Listing</a>
</li>

<li class='m-0'>
<a href='basics/listing-customizations.html' id='basics/listing-customizations.html' onclick='window.storeMenuState("basics/listing-customizations.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Listing Customizations</a>
</li>

<li class='m-0'>
<a href='basics/filter.html' id='basics/filter.html' onclick='window.storeMenuState("basics/filter.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Filters</a>
</li>

<li class='m-0'>
<a href='presets-guide/editing-customizations.html' id='presets-guide/editing-customizations.html' onclick='window.storeMenuState("presets-guide/editing-customizations.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Editing</a>
</li>

<li class='m-0'>
<a href='basics/brand.html' id='basics/brand.html' onclick='window.storeMenuState("basics/brand.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Brand</a>
</li>

<li class='m-0'>
<a href='basics/menu.html' id='basics/menu.html' onclick='window.storeMenuState("basics/menu.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Menu</a>
</li>

<li class='m-0'>
<a href='presets-guide/detail-page-for-complex-object.html' id='presets-guide/detail-page-for-complex-object.html' onclick='window.storeMenuState("presets-guide/detail-page-for-complex-object.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Detailing</a>
</li>

<li class='m-0'>
<a href='basics/layout.html' id='basics/layout.html' onclick='window.storeMenuState("basics/layout.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Layout</a>
</li>

<li class='m-0'>
<a href='basics/login.html' id='basics/login.html' onclick='window.storeMenuState("basics/login.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Login</a>
</li>

<li class='m-0'>
<a href='presets-guide/permissions.html' id='presets-guide/permissions.html' onclick='window.storeMenuState("presets-guide/permissions.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Permissions</a>
</li>

<li class='m-0'>
<a href='presets-guide/role.html' id='presets-guide/role.html' onclick='window.storeMenuState("presets-guide/role.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Role</a>
</li>

<li class='m-0'>
<a href='basics/shortcut.html' id='basics/shortcut.html' onclick='window.storeMenuState("basics/shortcut.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Keyboard Shortcut</a>
</li>

<li class='m-0'>
<a href='basics/confirm-dialog.html' id='basics/confirm-dialog.html' onclick='window.storeMenuState("basics/confirm-dialog.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Confirm Dialog</a>
</li>

<li class='m-0'>
<a href='slug.html' id='slug.html' onclick='window.storeMenuState("slug.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Slug</a>
</li>

<li class='m-0'>
<a href='seo.html' id='seo.html' onclick='window.storeMenuState("seo.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>SEO</a>
</li>

<li class='m-0'>
<a href='activity-log.html' id='activity-log.html' onclick='window.storeMenuState("activity-log.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Activity Log</a>
</li>

<li class='m-0'>
<a href='basics/worker.html' id='basics/worker.html' onclick='window.storeMenuState("basics/worker.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Worker</a>
</li>

<li class='m-0'>
<a href='basics/publish.html' id='basics/publish.html' onclick='window.storeMenuState("basics/publish.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Publish</a>
</li>

<li class='m-0'>
<a href='basics/i18n.html' id='basics/i18n.html' onclick='window.storeMenuState("basics/i18n.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Internationalization</a>
</li>

<li class='m-0'>
<a href='basics/l10n.html' id='basics/l10n.html' onclick='window.storeMenuState("basics/l10n.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Localization</a>
</li>

<li class='m-0'>
<a href='basics/redirection.html' id='basics/redirection.html' onclick='window.storeMenuState("basics/redirection.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Redirection</a>
</li>

<li class='m-0'>
<a href='basics/custom-page.html' id='basics/custom-page.html' onclick='window.storeMenuState("basics/custom-page.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Custom Pages</a>
</li>

<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Web Application</li>

<li class='m-0'>
<a href='advanced-functions/the-go-html-builder.html' id='advanced-functions/the-go-html-builder.html' onclick='window.storeMenuState("advanced-functions/the-go-html-builder.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>The Go HTML builder</a>
</li>

<li class='m-0'>
<a href='basics/page-func-and-event-func.html' id='basics/page-func-and-event-func.html' onclick='window.storeMenuState("basics/page-func-and-event-func.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Page Func and Event Func</a>
</li>

<li class='m-0'>
<a href='basics/layout-function-and-page-injector.html' id='basics/layout-function-and-page-injector.html' onclick='window.storeMenuState("basics/layout-function-and-page-injector.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Layout Function and Page Injector</a>
</li>

<li class='m-0'>
<a href='vuetify-components/lazy-portals.html' id='vuetify-components/lazy-portals.html' onclick='window.storeMenuState("vuetify-components/lazy-portals.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Lazy Portals</a>
</li>

<li class='m-0'>
<a href='basics/switch-pages-with-push-state.html' id='basics/switch-pages-with-push-state.html' onclick='window.storeMenuState("basics/switch-pages-with-push-state.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Switch Pages with Push State</a>
</li>

<li class='m-0'>
<a href='basics/reload-page-with-a-flash.html' id='basics/reload-page-with-a-flash.html' onclick='window.storeMenuState("basics/reload-page-with-a-flash.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Reload Page with a Flash</a>
</li>

<li class='m-0'>
<a href='basics/partial-refresh-with-portal.html' id='basics/partial-refresh-with-portal.html' onclick='window.storeMenuState("basics/partial-refresh-with-portal.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Partial Refresh with Portal</a>
</li>

<li class='m-0'>
<a href='basics/manipulate-page-url-in-event-func.html' id='basics/manipulate-page-url-in-event-func.html' onclick='window.storeMenuState("basics/manipulate-page-url-in-event-func.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Manipulate Page URL in Event Func</a>
</li>

<li class='m-0'>
<a href='basics/summary-of-event-response.html' id='basics/summary-of-event-response.html' onclick='window.storeMenuState("basics/summary-of-event-response.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Summary of Event Response</a>
</li>

<li class='m-0'>
<a href='basics/web-scope.html' id='basics/web-scope.html' onclick='window.storeMenuState("basics/web-scope.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>web.Scope</a>
</li>

<li class='m-0'>
<a href='basics/event-handling.html' id='basics/event-handling.html' onclick='window.storeMenuState("basics/event-handling.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Event Handling</a>
</li>

<li class='m-0'>
<a href='basics/form-handling.html' id='basics/form-handling.html' onclick='window.storeMenuState("basics/form-handling.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Form Handling</a>
</li>

<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>UI Components</li>

<li class='m-0'>
<a href='vuetify-components/basic-inputs.html' id='vuetify-components/basic-inputs.html' onclick='window.storeMenuState("vuetify-components/basic-inputs.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Basic Inputs</a>
</li>

<li class='m-0'>
<a href='vuetify-components/a-taste-of-using-vuetify-in-go.html' id='vuetify-components/a-taste-of-using-vuetify-in-go.html' onclick='window.storeMenuState("vuetify-components/a-taste-of-using-vuetify-in-go.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-blue-500'>A Taste of using Vuetify in Go</a>
</li>

<li class='m-0'>
<a href='vuetify-components/linkage-select.html' id='vuetify-components/linkage-select.html' onclick='window.storeMenuState("vuetify-components/linkage-select.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Linkage Select</a>
</li>

<li class='m-0'>
<a href='components-guide/composite-new-component-with-go.html' id='components-guide/composite-new-component-with-go.html' onclick='window.storeMenuState("components-guide/composite-new-component-with-go.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Composite new Component With Go</a>
</li>

<li class='m-0'>
<a href='components-guide/integrate-a-heavy-vue-component.html' id='components-guide/integrate-a-heavy-vue-component.html' onclick='window.storeMenuState("components-guide/integrate-a-heavy-vue-component.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Integrate a heavy Vue Component</a>
</li>

<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Appendix</li>

<li class='m-0'>
<a href='appendix/all-demo-examples.html' id='appendix/all-demo-examples.html' onclick='window.storeMenuState("appendix/all-demo-examples.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>All Demo Examples</a>
</li>
</ul>
</aside>

<main class='flex flex-col w-full bg-white overflow-x-hidden overflow-y-auto'>
<div id='docContentBox' class='flex flex-row w-full'>
<div class='flex flex-grow flex-col w-2/3'>
<div class='flex flex-row'>
<button @click='vars.hideAside = !vars.hideAside' class='w-12 h-12 p-4'>
<div class='w-4 h-4 fill-current text-gray-300'>
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 2 12 L 2 11 L 14 11 L 14 12 Z M 2 8.5 L 2 7.5 L 14 7.5 L 14 8.5 Z M 2 5 L 2 4 L 14 4 L 14 5 Z M 2 5 "/>
</g>
</svg>
</div>
</button>
</div>

<div id='docMainBox' class='px-16 pb-12 pt-4 overflow-auto'>
<h1 class='mb-8'>A Taste of using Vuetify in Go</h1>

<div class='border-t'><p><a href="https://vuetifyjs.com/en/" rel="nofollow">Vuetify</a> is a really mature Vue components library for
<a href="https://material.io/design/" rel="nofollow">Material Design</a>. We have made the efforts to
integrate most all of it as a go package. You can use it with ease just like any
other go package.</p>

<h2 id='use-container-toolbar-list-list-item-etc'>Use container, toolbar, list, list item etc
<a href='#use-container-toolbar-list-list-item-etc' class='anchor'></a>
</h2>
<p>This example is purely render, we didn&#39;t integrate any interaction (event func) to it.</p>

<highlightjs :language='"go"' :code='"import (\n\t\"github.com/qor5/web/v3\"\n\t\"github.com/qor5/web/v3/examples\"\n\t. \"github.com/qor5/x/v3/ui/vuetify\"\n\t. \"github.com/theplant/htmlgo\"\n)\n\ntype ListItem struct {\n\tType          string `json:\"type,omitempty\"`\n\tTitle         string `json:\"title,omitempty\"`\n\tPrependAvatar string `json:\"prependAvatar,omitempty\"`\n\tSubtitle      string `json:\"subtitle,omitempty\"`\n\tInset         bool   `json:\"inset,omitempty\"`\n}\n\nfunc HelloVuetifyList(ctx *web.EventContext) (pr web.PageResponse, err error) {\n\twrapper := func(children ...HTMLComponent) HTMLComponent {\n\t\treturn VContainer(\n\t\t\tVCard(children...),\n\t\t).GridList(Md).TextAlign(Xs, Center)\n\t}\n\n\titems := []ListItem{\n\t\t{\n\t\t\tType:  \"subheader\",\n\t\t\tTitle: \"Today\",\n\t\t},\n\t\t{\n\t\t\tTitle:         \"Brunch this weekend?\",\n\t\t\tPrependAvatar: \"https://cdn.vuetifyjs.com/images/lists/1.jpg\",\n\t\t\tSubtitle:      `\u003cspan class=\"text-primary\"\u003eAli Connors\u003c/span\u003e \u0026mdash; I&#39;ll be in your neighborhood doing errands this weekend. Do you want to hang out?`,\n\t\t},\n\t\t{\n\t\t\tType:  \"divider\",\n\t\t\tInset: true,\n\t\t},\n\t\t{\n\t\t\tTitle:         \"Summer BBQ\",\n\t\t\tPrependAvatar: \"https://cdn.vuetifyjs.com/images/lists/2.jpg\",\n\t\t\tSubtitle:      `\u003cspan class=\"text-primary\"\u003eto Alex, Scott, Jennifer\u003c/span\u003e \u0026mdash; Wish I could come, but I&#39;m out of town this weekend.`,\n\t\t},\n\t\t{\n\t\t\tType:  \"divider\",\n\t\t\tInset: true,\n\t\t},\n\t\t{\n\t\t\tTitle:         \"Oui oui\",\n\t\t\tPrependAvatar: \"https://cdn.vuetifyjs.com/images/lists/3.jpg\",\n\t\t\tSubtitle:      `\u003cspan class=\"text-primary\"\u003eSandra Adams\u003c/span\u003e \u0026mdash; Do you have Paris recommendations? Have you ever been?`,\n\t\t},\n\t\t{\n\t\t\tType:  \"divider\",\n\t\t\tInset: true,\n\t\t},\n\t\t{\n\t\t\tTitle:         \"Birthday gift\",\n\t\t\tPrependAvatar: \"https://cdn.vuetifyjs.com/images/lists/4.jpg\",\n\t\t\tSubtitle:      `\u003cspan class=\"text-primary\"\u003eTrevor Hansen\u003c/span\u003e \u0026mdash; Have any ideas about what we should get Heidi for her birthday?`,\n\t\t},\n\t\t{\n\t\t\tType:  \"divider\",\n\t\t\tInset: true,\n\t\t},\n\t\t{\n\t\t\tTitle:         \"Recipe to try\",\n\t\t\tPrependAvatar: \"https://cdn.vuetifyjs.com/images/lists/5.jpg\",\n\t\t\tSubtitle:      `\u003cspan class=\"text-primary\"\u003eBritta Holt\u003c/span\u003e \u0026mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.`,\n\t\t},\n\t}\n\n\tpr.Body = wrapper(\n\t\tVToolbar(\n\t\t\t// VToolbarSideIcon(),\n\t\t\tVToolbarTitle(\"Inbox\").Class(\"text-white\"),\n\t\t\tVSpacer(),\n\t\t\tVBtn(\"\").Icon(true).Children(\n\t\t\t\tVIcon(\"search\"),\n\t\t\t),\n\t\t).Color(\"cyan\"),\n\t\tVList(\n\t\t\tTemplate(\n\t\t\t\tDiv().Attr(\"v-html\", \"subtitle\"),\n\t\t\t).Attr(\"v-slot:subtitle\", \"{ subtitle }\"),\n\t\t).Lines(\"three\").ItemProps(true).Items(items),\n\t)\n\n\treturn\n}\n\nvar HelloVuetifyListPB = web.Page(HelloVuetifyList)\n\nvar HelloVuetifyListPath = examples.URLPathByFunc(HelloVuetifyList)\n"'></highlightjs>

<div>
<div class='demo'>
<a href='/examples/hello-vuetify-list' target='_blank'>Check the demo</a>
 | 
<a href='https://github.com/qor5/admin/tree/main/docs/docsrc/examples/examples_vuetify/vuetify-list.go#L3-L97' target='_blank'>Source on GitHub</a>
</div>
</div>

<h2 id='use-menu-card-list-etc'>Use menu, card, list, etc
<a href='#use-menu-card-list-etc' class='anchor'></a>
</h2>
<p>This example uses the menu popup, card, list component. and some interactions of clicking
buttons on the menu popup.</p>

<highlightjs :language='"go"' :code='"\nimport (\n\t\"github.com/qor5/web/v3\"\n\t\"github.com/qor5/web/v3/examples\"\n\t. \"github.com/qor5/x/v3/ui/vuetify\"\n\t. \"github.com/theplant/htmlgo\"\n)\n\ntype formData struct {\n\tEnableMessages bool\n\tEnableHints    bool\n}\n\nvar globalFavored bool\n\nconst favoredIconPortalName = \"favoredIcon\"\n\nfunc HelloVuetifyMenu(ctx *web.EventContext) (pr web.PageResponse, err error) {\n\tvar fv formData\n\terr = ctx.UnmarshalForm(\u0026fv)\n\tif err != nil {\n\t\treturn\n\t}\n\n\tpr.Body = VContainer(\n\t\texamples.PrettyFormAsJSON(ctx),\n\t\tweb.Scope(\n\t\t\tVMenu(\n\t\t\t\tweb.Slot(\n\t\t\t\t\tVBtn(\"Menu as Popover\").\n\t\t\t\t\t\tAttr(\"v-bind\", \"props\").\n\t\t\t\t\t\tColor(\"indigo\"),\n\t\t\t\t).Name(\"activator\").Scope(\"{ props }\"),\n\n\t\t\t\tVCard(\n\t\t\t\t\tVList(\n\t\t\t\t\t\tVListItem(\n\t\t\t\t\t\t\tTemplate(\n\t\t\t\t\t\t\t\tweb.Portal(\n\t\t\t\t\t\t\t\t\tfavoredIcon(),\n\t\t\t\t\t\t\t\t).Name(favoredIconPortalName),\n\t\t\t\t\t\t\t).Attr(\"v-slot:append\", true),\n\t\t\t\t\t\t).Attr(\"prepend-avatar\", \"https://cdn.vuetifyjs.com/images/john.jpg\").\n\t\t\t\t\t\t\tAttr(\"subtitle\", \"Founder of Vuetify\").\n\t\t\t\t\t\t\tTitle(\"John Leider\"),\n\t\t\t\t\t),\n\t\t\t\t\tVDivider(),\n\t\t\t\t\tVList(\n\t\t\t\t\t\tVListItem(\n\t\t\t\t\t\t\tVSwitch().Attr(\"v-model\", \"form.EnableMessages\").\n\t\t\t\t\t\t\t\tAttr(\"color\", \"purple\").\n\t\t\t\t\t\t\t\tAttr(\"label\", \"Enable messages\").\n\t\t\t\t\t\t\t\tAttr(\"hide-details\", true),\n\t\t\t\t\t\t),\n\t\t\t\t\t\tVListItem(\n\t\t\t\t\t\t\tVSwitch().Attr(\"v-model\", \"form.EnableHints\").\n\t\t\t\t\t\t\t\tAttr(\"color\", \"purple\").\n\t\t\t\t\t\t\t\tAttr(\"label\", \"Enable hints\").\n\t\t\t\t\t\t\t\tAttr(\"hide-details\", true),\n\t\t\t\t\t\t),\n\t\t\t\t\t),\n\n\t\t\t\t\tVCardActions(\n\t\t\t\t\t\tVSpacer(),\n\t\t\t\t\t\tVBtn(\"Cancel\").Variant(\"text\").\n\t\t\t\t\t\t\tOn(\"click\", \"locals.myMenuShow = false\"),\n\t\t\t\t\t\tVBtn(\"Save\").Color(\"primary\").\n\t\t\t\t\t\t\tVariant(\"text\").OnClick(\"submit\"),\n\t\t\t\t\t),\n\t\t\t\t).MinWidth(300),\n\t\t\t).CloseOnContentClick(false).\n\t\t\t\tLocation(\"end\").\n\t\t\t\tAttr(\"v-model\", \"locals.myMenuShow\"),\n\t\t).VSlot(\"{ locals, form }\").Init(\"{ myMenuShow: false }\").FormInit(JSONString(fv)),\n\t)\n\n\treturn\n}\n\nfunc favoredIcon() HTMLComponent {\n\tcolor := \"\"\n\tif globalFavored {\n\t\tcolor = \"text-red\"\n\t}\n\n\treturn VBtn(\"\").Variant(\"text\").Icon(\"mdi-heart\").Class(color).OnClick(\"toggleFavored\")\n}\n\nfunc toggleFavored(ctx *web.EventContext) (er web.EventResponse, err error) {\n\tglobalFavored = !globalFavored\n\ter.UpdatePortals = append(er.UpdatePortals, \u0026web.PortalUpdate{\n\t\tName: favoredIconPortalName,\n\t\tBody: favoredIcon(),\n\t})\n\treturn\n}\n\nfunc submit(ctx *web.EventContext) (er web.EventResponse, err error) {\n\ter.Reload = true\n\ter.RunScript = \"locals.myMenuShow = false\"\n\treturn\n}\n\nvar HelloVuetifyMenuPB = web.Page(HelloVuetifyMenu).\n\tEventFunc(\"submit\", submit).\n\tEventFunc(\"toggleFavored\", toggleFavored)\n\nvar HelloVuetifyMenuPath = examples.URLPathByFunc(HelloVuetifyMenu)\n"'></highlightjs>
<p><code>.VSlot(&#34;{ locals, form }&#34;).Init(&#34;{ myMenuShow: false }&#34;).FormInit(JSONString(fv))</code> used to initialize the variables of <code>web.Scope</code>.
<code>locals</code> corresponds to the <code>Init</code> method and <code>form</code> corresponds to the <code>FormInit</code> method.</p>

<p><code>.Init</code> will initialize <code>locals.myMenuShow</code> to <code>false</code>. So that you don&#39;t need to modify javascript code to do
the initialization. It&#39;s often useful to control dialog, popups. At this example,
We add it, So that the cancel button on the menu, could actually close the menu without
requesting server backend.</p>

<p><code>toggleFavored</code> event func did an partial update only to the favorite icon button. So that it won&#39;t close the
menu popup, but updated the button to toggle the favorite icon.</p>

<div>
<div class='demo'>
<a href='/examples/hello-vuetify-menu' target='_blank'>Check the demo</a>
 | 
<a href='https://github.com/qor5/admin/tree/main/docs/docsrc/examples/examples_vuetify/vuetify-menu.go#L3-L113' target='_blank'>Source on GitHub</a>
</div>
</div>
</div>
</div>
</div>

<div class='font-medium text-base hidden xl:block text-gray-600 pt-4'>
<div class='sticky top-4 w-52'>On This Page<toc></toc></div>
</div>
</div>
<search-result></search-result></main>
</div>
</div>
</div>
</div>
</body>
</html>
